<!-- ToastEditor.vue -->
<template>
  <div ref="editorRef" />
</template>

<script setup>
import "@toast-ui/editor/dist/toastui-editor.css";
import { onMounted, ref, watch } from "vue";
import Editor from "@toast-ui/editor";
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:modelValue"]);

const editorRef = ref();
let editor;

onMounted(() => {
  editor = new Editor({
    el: editorRef.value,
    height: "500px",
    initialEditType: "markdown",
    previewStyle: "vertical",
    initialValue: props.modelValue,
    events: {
      change: () => {
        emit("update:modelValue", editor.getMarkdown());
      },
    },
  });
});

watch(
  () => props.modelValue,
  (newVal) => {
    if (editor && newVal !== editor.getMarkdown()) {
      editor.setMarkdown(newVal);
    }
  }
);
</script>
<style>
/* 使用 :deep 或 ::v-deep 穿透选择器，确保样式能应用到动态生成的元素 */
:deep(.toastui-editor-toolbar-icons) {
  box-sizing: border-box !important;
  cursor: pointer !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 3px !important;
  margin: 7px 5px !important;
  border: 1px solid #f7f9fc !important;
}
</style>
